var commentslist=[
    {
        'img':'img/tu1.jpg',
        "name":'盐焗小乳猪',
        "text_p":'界面元素层次清晰，能巧妙地突出界面的重要内容，并能传达元素可交互的感觉。另外，系统的表现应该是直觉的，用户在使用过程中无需思考。',
        "time":'10-09 13:30',
        "ip":' 浙江',
        "pl":'1',
        "morebtn":'hide',
    },
    {
        'img':'img/tu1.jpg',
       "name":'盐焗小乳猪',
       "text_p":'界面元素层次清晰，能巧妙地突出界面的重要内容，并能传达元素可交互的感觉。另外，系统的表现应该是直觉的，用户在使用过程中无需思考。',
       "time":'10-09 13:30',
       "ip":' 浙江',
       "pl":'1',
       "morebtn":'hide',
       'list':[
           {
            'img':'img/tu1.jpg',
            "name":'重庆市网友',
            "text_p":'伊朗是阿拉伯国家，伊朗是阿拉伯国家，只是信仰有差异。一个逊尼尔派，一个什叶派，但 但是不能说不是阿拉伯人。',
            "time":'22分钟前',
            "ip":' 浙江',
            "pl":'1111'
           },
           {
            'img':'img/tu1.jpg',
            "name":'重庆市网友',
            "text_p":'小管他什么国，他们是穆斯林这总没错。',
            "time":'22分钟前',
            "ip":' 浙江',
            "pl":'1112'
           },
           {
            'img':'img/tu1.jpg',
            "name":'重庆市网友',
            "text_p":'小管他什么国，他们是穆斯林这总没错。',
            "time":'22分钟前',
            "ip":' 浙江',
            "pl":'1112'
           }
       ]
    },
    {
        'img':'img/tu2.png',
        "name":'重庆市网友',
        "text_p":'小编犯了一个常识性错误，伊朗不是阿拉伯成员国家，是波斯国。',
        "time":'22分钟前',
        "ip":' 湖北',
        "pl":'1',
        "morebtn":'show',
        'list':[
            {
            'img':'img/tu2.png',
             "name":'重庆市网友',
             "text_p":'伊朗是阿拉伯国家，伊朗是阿拉伯国家，只是信仰有差异。一个逊尼尔派，一个什叶派，但 但是不能说不是阿拉伯人。',
             "time":'22分钟前',
             "ip":' 湖北',
             "pl":'1111'
            },
            {
            'img':'img/tu2.png',
             "name":'重庆市网友',
             "text_p":'小管他什么国，他们是穆斯林这总没错。',
             "time":'22分钟前',
             "ip":' 湖北',
             "pl":'1112'
            },
            {
            'img':'img/tu2.png',
             "name":'重庆市网友',
             "text_p":'小管他什么国，他们是穆斯林这总没错。',
             "time":'22分钟前',
             "ip":' 广东',
             "pl":'1112'
            }
        ]
     }
]
var commentshtml=''
if(commentslist.length>=1){
    commentshtml+="<div class='Cslis_item_warp'>"
    commentslist.forEach((item,index)=>{
        commentshtml+=`
        <div class="Cslis_item list">
            <div class="name_box">
                <div class="userimg"><img src="${item.img}" alt=""></div>
            </div>
            <div class="infor">
                <div class="item">
                    <div class="name_bt">${item.name}</div>
                    <div class="text_p">
                    ${item.text_p}
                    </div>
                    <div class="bot">
                        <p>${item.time} </p>
                         <div class="replybtn tab" onclick="show_reply(this)"><span>回复</span></div>
                        <div class="tab" onclick="zan(${item.id},this)"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-a-pinglundianzanmoren"></use></svg><span>${item.pl}</span></div>
                      
                    </div>
                    <div class="reply_input">
                        <input type="text" class="text_input" placeholder="回复：${item.name}">
                        <div class="poswrap">
                            <div class="fr">
                                <div class="buttom submit" onclick="submitreply(${item.id},this)">回复</div>
                                <div class="buttom" onclick="hide_reply(this)">取消</div>
                            </div>
                        </div>
                    </div>
                </div>
                ${
                    (function(){
                        if(item.list){
                            return `
                            <div class="inforbg"> 
                            <div class="listbox">
                            ${
                                item.list.map(itm=>{
                                    return `
                                    
                                    <div class="list">
                                        <div class="name_box">
                                            <div class="userimg"><img src="${itm.img}" alt=""></div>
                                        </div>
                                        <div class="infor">
                                            <div class="item">
                                                <div class="name_bt">${itm.name}</div>
                                                <div class="text_p">
                                                ${itm.text_p}
                                                </div>
                                                <div class="bot">
                                                    <p>${itm.time}</p>
                                                    <div class="replybtn tab" onclick="show_reply(this)"><span>回复</span></div>
                                                    <div class="tab" onclick="zan(${itm.id},this)"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-a-pinglundianzanmoren"></use></svg><span>${itm.pl}</span></div>
                                                </div>
                                                <div class="reply_input">
                                                    <input type="text" class="text_input" placeholder="回复：${itm.name}">
                                                    <div class="poswrap">
                                                        <div class="fr">
                                                            <div class="buttom submit" onclick="submitreply(${itm.id},this)">回复</div>
                                                            <div class="buttom" onclick="hide_reply(this)">取消</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>`
                                }).join('')
                            }
                            </div>
                            <div class="morelis  ${item.morebtn}">
                                —— <span>展开4条回复</span>
                            </div>
                          </div>
                            `
                        }else{
                            return``
                        }
                    })()
                 }
            </div>
        </div>
        `
    })
    commentshtml+="</div>"
    commentshtml+='<a class="morebtn">查看更多评论</a>'
}else{
    commentshtml+=`<div class="nohtml-pl">
                        <img src="images/nouserbj.png" alt="">
                        <p>暂无评论</p>
                        <span>成为首个评论者吧！</span>
                    </div>`
}

$(".Cslis_wrap").html(commentshtml);

//阻止事件冒泡
function stopNextEvent(evt) {
    var e = (evt) ? evt : window.event;
    if (window.event) {
        e.cancelBubble = true;// ie下阻止冒泡
    } else {
        //e.preventDefault();
        e.stopPropagation();// 其它浏览器下阻止冒泡
    }
}

//回复
function show_reply(obj) {
    var t_wrap = $(obj).parents('.item');
    $(".replybtn ").removeClass("active");
    $(obj).toggleClass("active");
    $('.reply_input:visible').stop().slideUp(200);
    t_wrap.find('.reply_input').stop().slideDown();
    $(".reply_input:visible").find(".text_input").val('')
}
// 取消
function hide_reply(obj) {
    var t_wrap = $(obj).parents('.item');
    t_wrap.find('.reply_input').stop().slideUp(200);
    $(".replybtn ").removeClass("active");
}
// 点赞
function zan(id,obj){
    let num=Number($(obj).find("span").text());
    if($(obj).hasClass("active")){
        num=num-1;
        num==0? num='' : num;
        $(obj).find("span").text(num);
        ui.msg("已取消点赞")
        console.log()
    }else{
        $(obj).find("span").text(num+1);
        ui.msg("点赞了成功")
    }
   $(obj).toggleClass("active");

}
// 回复消息
function submitreply(id,obj){
    let text=$.trim($(obj).parents(".reply_input").find(".text_input").val());
    if(text==''){
        ui.msg("请输入你想要说的");
        return false;
    }
    ui.msg(text);
    hide_reply(obj)
}
// 获取textarea元素
var textarea = document.getElementById('Ct_content');
// 为textarea添加input事件监听器
if(textarea){
    textarea.addEventListener('input', function() {
        let btn= $(".Comments_wrap .Cs_postwrap .poswrap .buttom")
        if(textarea.value){
            btn.addClass("active")
        }else{
            btn.removeClass("active")
        }
    });
     
}


 